


import './forms.scss';
import { useFormItemInit } from './hooks';
import { FormItemBaseProps } from './interface';
import React from 'react';
import { useDrag } from './drop.hooks';
import { DatePicker } from 'antd-mobile';
import { CalendarOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { PickerDate } from 'antd-mobile/es/components/date-picker/util';
import Readonly from './Readonly';
import { DateUtils } from '../../utils/date';
import { Components } from '../..';




interface IProps extends FormItemBaseProps {
}
export default function MyDatePicker(props: IProps) {
    const { formControl, className = '', style = {} } = props;
    const {
        value,
        readonly,
        outerClassName,
        layout,
        outerStyle,
        labelStyle,
    } = useFormItemInit(formControl, className, style);

    const [pickerValue, setPickerValue] = React.useState<Date>(new Date())

    const [visible, setVisible] = React.useState(false);

    React.useEffect(() => {
        if (value) {
            setPickerValue(new Date(value));
        }
    }, [value]);

    React.useEffect(() => {
    }, []);


    /** 拖拽排序 */
    const dropRef = React.useRef<HTMLDivElement>(null);
    useDrag({ dropRef, formControl });

    /** 清除 */
    const clean = () => {
        formControl.setValue(null, 'user');
    };
    /** 打开 */
    const open = () => {
        setVisible(true);
    };
    /** 关闭 */
    const close = () => {
        setVisible(false);
    };
    /** 确定 */
    const confirm = (v: PickerDate) => {
        console.log(v);
        const strFormat = "YYYY-MM-DD"
        const strDate = DateUtils.dateFormat(v, strFormat);
        setPickerValue(v);
        formControl.setValue(strDate, 'user');
    }
    return (
        <>
            <div component-name='form-item' className={outerClassName} style={outerStyle} ref={dropRef}>
                <div className={`field ${layout}`}>
                    <Components.forms.FormLabel formControl={formControl} style={labelStyle} />
                    <div className='control'>
                        <div className="value picker">
                            {/* 显示值 */}
                            <Readonly onSelectorClick={open} formControl={formControl} />
                            {
                                readonly === false && <>
                                    {/* 清除 */}
                                    {/* 清除 */}
                                    <CloseCircleOutlined onClick={() => clean()} style={{ 'fontSize': '14px', 'marginLeft': '5px' }} />
                                    {/* 选择 */}
                                    <CalendarOutlined onClick={() => open()} style={{ 'fontSize': '14px', 'marginLeft': '5px' }} />
                                    <DatePicker
                                        // columns={columns}
                                        visible={visible}
                                        onClose={() => close()}
                                        value={pickerValue}
                                        onConfirm={v => confirm(v)}
                                        title='时间选择'
                                    />
                                </>
                            }
                        </div>
                    </div>
                </div>

            </div>
        </>
    )
}
